<template>
<div class="order-return">

    <el-card class="card">
        <div slot="header" class="header">退单查询</div>
        <div>
             <el-form ref="searchForm" :model="search" label-width="120px">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="添加时间查询">
                            <el-date-picker v-model="search.createTime" type="datetime" placeholder="请选择添加时间"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="处理时间查询">
                            <el-date-picker v-model="search.handleTime" type="datetime" placeholder="请选择处理时间"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="订单用户名">
                            <el-input v-model="search.memberUsername " placeholder="请输入订单用户名"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="订单id查询">
                            <el-input v-model="search.orderId" placeholder="请输入订单编号"></el-input>
                        </el-form-item> 
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="订单编号查询">
                              <el-input v-model="search.orderSn" placeholder="请输入订单编号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="订单状态">
                           <el-select v-model="search.status" placeholder="请选择订单状态" @change="selectChange">
                                <el-option v-for="item in statuss" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="8" style="text-align:right;">
                        <el-button type="primary" @click="resetSearch">重置搜索</el-button>
                    </el-col>
                    <el-col :span="8" style="text-align:right;">
                        <el-button type="primary" @click="submitSearch">查询订单</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </el-card>

            <!-- 退单列表 -->
            <el-card class="card">
                <div slot="header" class="header">退单列表</div>
                <div>
  <el-table
                :data="orderReturnList" border
                style="width: 100%;">
                <el-table-column
                    label="序号"
                    width="50"
                    type="index">
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    prop="orderSn"
                    label="订单编号" >
                </el-table-column>
                 <el-table-column
                    header-align="center"
                    align="center"
                    prop="memberUsername"
                    label="用户名" >
                </el-table-column>
                 <el-table-column
                        header-align="center"
                        align="center"
                        label="商品图片" width="120" >
                        <template slot-scope="scope">
                            <img :src="scope.row.productPic" alt="sorry">
                        </template>
                    </el-table-column>
                     <el-table-column
                    header-align="center"
                    align="center"
                    label="退单状态" >
                    <template slot-scope="scope">
                        <el-tag type="info" v-if="scope.row.status===0" effect="dark">待处理</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.status===1" effect="dark">退货中</el-tag>
                        <el-tag type="success" v-else-if="scope.row.status===2" effect="dark">已完成</el-tag>
                        <el-tag type="danger" v-else  effect="dark">已拒绝</el-tag>
                    </template>
                </el-table-column>
                 <el-table-column
                    header-align="center"
                    align="center"
                    prop="reason"
                    label="退单原因" >
                </el-table-column>
                 <el-table-column
                    header-align="center"
                    align="center"
                    prop="productName"
                    label="产品名称" >
                </el-table-column>
                 <el-table-column
                    header-align="center"
                    align="center"
                    prop="productRealPrice"
                    label="商品价格" >
                </el-table-column>
                 <el-table-column
                    header-align="center"
                    align="center"
                    prop="handleNote"
                    label="处理结果" >
                </el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    prop="handleTime"
                    label="处理时间" >
                </el-table-column>
                  <el-table-column fixed="right" label="操作" width="140" class="btns" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" @click="returnOrderDetail(scope.row.id)">查看明细</el-button>
                    </template>
                </el-table-column>
            </el-table>
                </div>
            </el-card>
          
              <!-- 分页器 -->
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.start" :page-sizes="page.sizes" :page-size="page.limit" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount">
        </el-pagination>

</div>
</template>

<script>
import {findReturnApply} from '@/api/order/orderreturn/index'
export default {
    name:'orderReturnList',
    components: {

    },
    data() {
        return {
            // 退单列表
            orderReturnList:[],
             page: {
                limit: 10, //每一页数量
                sizes: [10, 20, 30, 40],
                totalCount: 40, //总页数
                start: 1 //当前页码
            },
            search:{
                status:'',
                orderId:'',
                orderSn:'',
                createTime:'',
                handleTime:'',
                memberUsername:''

            },
          statuss:[
              {
                  name:'待处理',
                  id:0
              },
               {
                  name:'退货中',
                  id:1
              },
               {
                  name:'已完成',
                  id:2
              },
               {
                  name:'已拒绝',
                  id:3
              }
          ]


        };
    },
    computed: {

    },
    created() {
        this.init()
         

    },
    mounted() {

    },
    methods: {
         init() {
            // 判断搜索条件--只要有数据的
                let search={}
            for(let item in this.search){
                if(this.search[item]){
                  search[item]=this.search[item]
                }
            }
            console.log(search);
           
            findReturnApply(this.page.start, this.page.limit,search).then(res => {
                console.log(res);
                if (res.success) {
                    this.orderReturnList = res.data.rows
                    this.page.totalCount = res.data.total

                } else {
                    this.$message.error('数据请求错误')
                }
            })
        },
         // 分页器
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.page.limit = val
            this.init()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            // 修改当前页
            this.page.start = val
            this.init()
        },
         submitSearch() {
            // 请求第一页数据
            // this.page.start=1
            console.log(this.search)
            this.init()
        },
        selectChange(e){
            // console.log(e);
            this.search.status=e
        },
        // 重置搜索条件
        resetSearch(){
           this.searchForm = this.$options.data().searchForm
        },
        // 查看退单明细
        returnOrderDetail(id){
            this.$router.push({name:"orderReturnDetail",query:{id}})

        }

    },
};
</script>

<style scoped lang="scss">
.card{
    margin: 20px;
    img{
        width: 120px;
        height: 120px;
    }
    .header{
        font-weight: bolder;
        font-size: 20px;
        color: #26A65B;
    }
}

</style>
